<template>
  <gg-form-item :tip="tip" :label="label" :must="must" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth"
    :layout="localLayout" :onQClear="onQClear" :input-value="localVal">
    <view class="gg-textarea">
      <textarea class="gg-textarea-item" v-model="localVal" :maxlength="maxlength" :placeholder="placeholder"
        placeholder-class="gg-textarea-placeholder" @input="updateInput" auto-height />
      <view class="gg-textarea-maxlength" v-if="maxlength>=1">
        <text>{{tempLength}}</text>/<text>{{maxlength}}</text>
      </view>
    </view>
  </gg-form-item>
</template>

<script>
import MixinsCommon from '../mixins/mixins-common.js';
export default {
  mixins: [MixinsCommon],
  name: "GgTextarea",
  inject: {
    ggFormGroup: {
      default() {
        return null
      }
    }
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    maxlength: {
      type: [Number, String],
      default: -1
    },
    tip: {
      type: String,
      default: ""
    },
    onQClear: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: ""
    },
    messageDisplay: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      localVal: '',
      tempLength: 0,
    };
  },
  watch: {
    value(newVal) {
      this.localVal = newVal;
      this.tempLength = this.localVal.length;
    }
  },
  created: function () {
    this.localVal = this.value;
  },
  methods: {
    updateInput(e) {
      this.tempLength = this.localVal.length;
      this.$emit('input', this.localVal);
    },
    /* 监听自己清除按钮点击事件 */
    onEmpty() {
      this.localVal = '';
      this.updateInput()
    }
  }
};
</script>

<style>
.gg-textarea-item {
  min-height: 65px;
  line-height: 1.5em;
  padding-top: 7px;
  font-size: 14px;
  width: auto;
  margin-right: 20px;
}
.gg-textarea-maxlength {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  text-align: right;
}
.gg-textarea-placeholder {
  font-size: 14px;
}
</style>
